<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="100px"
        v-show="showSearch"
      >
        <el-form-item label="省" prop="provinceId">
          <el-select
            v-model="queryParams.provinceId"
            placeholder="请选择省"
            @change="chooseProvince"
            clearable
          >
            <el-option
              v-for="item in provinceData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="cityId">
          <el-select
            v-model="queryParams.cityId"
            placeholder="请选择市"
            @change="chooseCity"
            clearable
          >
            <el-option
              v-for="item in cityData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区/县" prop="areaId">
          <el-select
            v-model="queryParams.areaId"
            placeholder="请选择区/县"
            clearable
          >
            <el-option
              v-for="item in areaData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
          <el-button plain icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>    
      </el-form>
      <el-row :gutter="10" class="mb8">
	      <el-col :span="1.5">
	        <el-button type="primary" icon="Plus" @click="addres">添加</el-button>
	      </el-col>
	      <el-col :span="1.5">
	        <el-button plain icon="Delete" :disabled="multiple" @click="delData">删除</el-button>
	      </el-col>
	      <right-toolbar v-model:showSearch="showSearch" @queryTable="getListData"></right-toolbar>
	    </el-row>
    </el-tabs>
    <el-table
      v-loading="loading"
      border
      :data="getData"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" width="55" align="center" reserve-selection />
      <el-table-column label="省" align="center" prop="province" />
      <el-table-column label="市" align="center" prop="city" />
      <el-table-column label="区/县" align="center" prop="area" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button type="text"  @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button type="text"  @click="handleView(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.page"
      v-model:limit="queryParams.rows"
      @pagination="getListData"
    />
    <el-dialog
      :title="title"
      v-model="open"
      width="850px"
      append-to-body
      @close="closeDialog"
    >
      <el-form ref="dispositionRef" :model="form" :rules="rules" label-width="120px">
      	<p class="dialogTitle">{{ title }}</p>
      	<el-row>
      		<el-col :span="12">
      			<el-form-item label="省" prop="provinceId">
		          <el-select
		            v-model="form.provinceId"
		            placeholder="请选择"
		            @change="chooseFormProvince"
		            :disabled="isEdit"
		            style="width: 250px"
		          >
		            <el-option
		              v-for="item in provinceFormData"
		              :key="item.id"
		              :label="item.name"
		              :value="item.id"
		            >
		            </el-option>
		          </el-select>
		        </el-form-item>
      		</el-col>
      		<el-col :span="12">
      			<el-form-item label="市" prop="cityId">
		          <el-select
		            v-model="form.cityId"
		            placeholder="请选择"
		            @change="chooseFormCity"
		            :disabled="isEdit"
		            style="width: 250px"
		          >
		            <el-option
		              v-for="item in cityFormData"
		              :key="item.id"
		              :label="item.name"
		              :value="item.id"
		            >
		            </el-option>
		          </el-select>
		        </el-form-item>
      		</el-col>   			
      	</el-row>       
        
        <el-form-item label="区/县" prop="areaId">
          <el-select
            v-model="form.areaId"
            placeholder="请选择"
            :disabled="isEdit"
            style="width: 250px"
          >
            <el-option
              v-for="item in areaFormData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="救援力量和物资投入" prop="rescueForceMaterialInput">
          <el-input
            v-model="form.rescueForceMaterialInput"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="地震灾害危重区域识别" prop="earthquakeDisasterCriticalArea">
          <el-input
            v-model="form.earthquakeDisasterCriticalArea"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="交通系统保障和抢修" prop="trafficSystemSupportRepair">
          <el-input
            v-model="form.trafficSystemSupportRepair"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="通信系统保障和抢修" prop="communicationsSystemSupportRepair">
          <el-input
            v-model="form.communicationsSystemSupportRepair"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="电力系统保障和抢修" prop="powerSystemSupportRepair">
          <el-input
            v-model="form.powerSystemSupportRepair"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="重要基础设施隐患排查" prop="importantFacilitiesCheck">
          <el-input
            v-model="form.importantFacilitiesCheck"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="气候特征应对" prop="climateFeatureReply">
          <el-input
            v-model="form.climateFeatureReply"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="民族特征应对" prop="nationFeatureReply">
          <el-input
            v-model="form.nationFeatureReply"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="谣言、舆情应对" prop="rumorReply">
          <el-input
            v-model="form.rumorReply"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="其他地方特征应对">
          <el-input
            v-model="form.otherFeatureReply"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button plain @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="openView"
      width="850px"
      append-to-body
      @close="closeDialog"
    >
		<el-form ref="dispositionRef" :model="form" :rules="rules" label-width="120px">
      <p class="dialogTitle">{{ title }}</p>
      	<el-row>
      		<el-col :span="12">
      			<el-form-item label="省" prop="provinceId">
		          <el-select
		            v-model="form.provinceId"
		            placeholder="请选择"
		            @change="chooseFormProvince"
		            disabled
		            style="width: 250px"
		          >
		            <el-option
		              v-for="item in provinceFormData"
		              :key="item.id"
		              :label="item.name"
		              :value="item.id"
		            >
		            </el-option>
		          </el-select>
		        </el-form-item>
      		</el-col>
      		<el-col :span="12">
      			<el-form-item label="市" prop="cityId">
		          <el-select
		            v-model="form.cityId"
		            placeholder="请选择"
		            @change="chooseCity"
		            disabled
		            style="width: 250px"
		          >
		            <el-option
		              v-for="item in cityFormData"
		              :key="item.id"
		              :label="item.name"
		              :value="item.id"
		            >
		            </el-option>
		          </el-select>
		        </el-form-item>
      		</el-col>   			
      	</el-row>       
        
        <el-form-item label="区/县" prop="areaId">
          <el-select
            v-model="form.areaId"
            placeholder="请选择"
            disabled
            style="width: 250px"
          >
            <el-option
              v-for="item in areaFormData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="救援力量和物资投入" prop="rescueForceMaterialInput">
          <el-input
            v-model="form.rescueForceMaterialInput"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="地震灾害危重区域识别" prop="earthquakeDisasterCriticalArea">
          <el-input
            v-model="form.earthquakeDisasterCriticalArea"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="交通系统保障和抢修" prop="trafficSystemSupportRepair">
          <el-input
            v-model="form.trafficSystemSupportRepair"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="通信系统保障和抢修" prop="communicationsSystemSupportRepair">
          <el-input
            v-model="form.communicationsSystemSupportRepair"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="电力系统保障和抢修" prop="powerSystemSupportRepair">
          <el-input
            v-model="form.powerSystemSupportRepair"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="重要基础设施隐患排查" prop="importantFacilitiesCheck">
          <el-input
            v-model="form.importantFacilitiesCheck"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="气候特征应对" prop="climateFeatureReply">
          <el-input
            v-model="form.climateFeatureReply"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="民族特征应对" prop="nationFeatureReply">
          <el-input
            v-model="form.nationFeatureReply"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="谣言、舆情应对" prop="rumorReply">
          <el-input
            v-model="form.rumorReply"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="其他地方特征应对">
          <el-input
            v-model="form.otherFeatureReply"
            type="textarea"
            maxlength="500"
            rows="6"
            show-word-limit
            disabled
          />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
<script setup name="Single">
import { getProvince3, getChildArea } from "@/api/system/division";
import {
  getList,
  saveList,
  getDisposition,
  delList,
  updateList,
  getUserProvinceId
} from "@/api/suggestions/disposition";

const { proxy } = getCurrentInstance();
const showSearch = ref(true);
const activeName = ref("first");
const open = ref(false); //dialog操作
const openView = ref(false);
const getData = ref([]); //获取列表数组
const title = ref(""); //标题
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const isEdit = ref(false);
const loading = ref(false);
const provinceFormData = ref([]);//表单省 
const cityFormData = ref([]);//表单市
const areaFormData = ref([]);//表单区、县

const data = reactive({
  form: {},
  queryParams: {
    page: 1,
    rows: 10,
    provinceId: null,
    cityId: null,
    areaId: null,
  },
  taskDetailDialog: {
    ercmId: "",
    ercmProvince: "",
    ercmCity: "",
    ercmPrefecture: "",

    rescueForceMaterialInput: "",
    earthquakeDisasterCriticalArea: "",
    trafficSystemSupportRepair: "",
    communicationsSystemSupportRepair: "",
    powerSystemSupportRepair: "",
    importantFacilitiesCheck: "",
    climateFeatureReply: "",
    nationFeatureReply: "",
    rumorReply: "",
    otherFeatureReply: "",
  },
  rules: {
    ercmProvince: [
      { required: true, message: "省不能为空", trigger: "change" },
    ],
    ercmCity: [{ required: true, message: "市不能为空", trigger: "change" }],
    ercmPrefecture: [
      { required: true, message: "县不能为空", trigger: "change" },
    ],
    rescueForceMaterialInput: [
      {
        required: true,
        message: "救援力量和物资投入不能为空",
        trigger: "blur",
      },
    ],
    earthquakeDisasterCriticalArea: [
      {
        required: true,
        message: "地震灾害危重区域识别不能为空",
        trigger: "blur",
      },
    ],
    trafficSystemSupportRepair: [
      {
        required: true,
        message: "交通系统保障和抢修不能为空",
        trigger: "blur",
      },
    ],
    communicationsSystemSupportRepair: [
      {
        required: true,
        message: "通信系统保障和抢修不能为空",
        trigger: "blur",
      },
    ],
    powerSystemSupportRepair: [
      {
        required: true,
        message: "电力系统保障和抢修不能为空",
        trigger: "blur",
      },
    ],
    importantFacilitiesCheck: [
      {
        required: true,
        message: "重要基础设施隐患排查不能为空",
        trigger: "blur",
      },
    ],
    climateFeatureReply: [
      { required: true, message: "气候特征应对不能为空", trigger: "blur" },
    ],
    nationFeatureReply: [
      { required: true, message: "民族特征应对不能为空", trigger: "blur" },
    ],
    rumorReply: [
      { required: true, message: "谣言、舆情应对不能为空", trigger: "blur" },
    ],
    otherFeatureReply: [
      { required: true, message: "其他地方特征应对不能为空", trigger: "blur" },
    ],
  },
});
const { queryParams, form, rules, taskDetailDialog } = toRefs(data);

function chooseProvince(value) {
  console.log(value);
  queryParams.value.cityId = null;
  queryParams.value.areaId = null;
  cityData.value = [];
  areaData.value = [];
  getChildArea(value).then(response => {
    cityData.value = response.data;
	});
}

function chooseCity(value) {
  queryParams.value.areaId = null;
  areaData.value = [];
  getChildArea(value).then((response) => {
    areaData.value = response.data;
  });
}
function chooseFormProvince(value){
	form.value.cityId = null;
	form.value.areaId = null;
	cityFormData.value = [];
	areaFormData.value = [];
	getChildArea(value).then(response => {
    cityFormData.value = response.data;
	});	
}
function chooseFormCity(value){
	form.value.areaId = null;
	areaFormData.value = [];
	getChildArea(value).then(response => {
	    areaFormData.value = response.data;
	});
}
/** 获取省列表 */
function getProvinceData() {
  getProvince3().then((response) => {
    provinceData.value = response.data;
    provinceFormData.value = response.data;
  });
}
function addProvinceFormData(provinceId) {
	getProvince3().then(response => {
    provinceFormData.value = response.data;
	});
	getChildArea(provinceId).then(response => {
    cityFormData.value = response.data;
	});	
}

function editProvinceFormData(provinceId,cityId) {
	getProvince3().then(response => {
	    provinceFormData.value = response.data;
	});
	getChildArea(provinceId).then(response => {
    cityFormData.value = response.data;
	});
	getChildArea(cityId).then(response => {
	    areaFormData.value = response.data;
	});
}
// 获取列表
function getListData() {
	loading.value = true;
  getList(queryParams.value).then((res) => {
    getData.value = res.data.rows;
    total.value = res.data.total;
    loading.value = false;
  });
}

// 查询
function handleQuery() {
  queryParams.page = 1;
  getListData();
}
// 重置
function resetQuery() {
  proxy.resetForm("queryRef");
  getListData();
}

// 添加按钮
function addres() {
  open.value = true;
  title.value = "添加应急处置对策";
  getUserProvinceId().then((res) => {
  	form.value.provinceId = res.data;
    addProvinceFormData(res.data);
  });
}
// 删除
function delData() {
  proxy.$modal
    .confirm("是否确认删除吗？")
    .then(function () {
      return delList(ids.value);
    })
    .then(() => {
      getListData();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

// 修改操作
function handleUpdate(row) {
  title.value = "修改应急处置对策";
  getDisposition(row.id).then(response => {
    form.value = response.data;
    open.value = true;
    editProvinceFormData(response.data.provinceId,response.data.cityId)
  });
}

//查看操作
function handleView(row) {
  title.value = "查看应急处置对策";
  getDisposition(row.id).then(response => {
    form.value = response.data;
    openView.value = true;
    editProvinceFormData(response.data.provinceId,response.data.cityId)
  });  
}

//保存
function submitForm() {
  proxy.$refs["dispositionRef"].validate((valid) => {
    if (!valid) {
      return;
    }
    if (title.value != "修改应急处置对策") {
      saveList(form.value).then((res) => {
        if(res.message == "该省市区县已存在,不能添加!"){		    		
					proxy.$modal.msgWarning(res.message);
				}else{
					proxy.$modal.msgSuccess(res.message);
					open.value = false;
			  	getListData();
				}
      });
    } else {
      updateList(form.value).then((res) => {
        if(res.message == "该省市区县已存在,不能修改!"){		    		
					proxy.$modal.msgWarning(res.message);
				}else{
					proxy.$modal.msgSuccess(res.message);
					open.value = false;
			  	getListData();
				}
      });
    }
  });
}

//复选框操作
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 表单重置
function reset() {
  form.value = {
    ercmId: "",
    provinceId: null,
    cityId: null,
    prefectureId: null,
    rescueForceMaterialInput: null,
    earthquakeDisasterCriticalArea: null,
    trafficSystemSupportRepair: null,
    communicationsSystemSupportRepair: null,
    powerSystemSupportRepair: null,
    importantFacilitiesCheck: null,
    climateFeatureReply: null,
    nationFeatureReply: null,
    rumorReply: null,
    otherFeatureReply: null,
  };
  proxy.resetForm("dispositionRef");
}

//关闭dialog
function closeDialog() {
  open.value = false;
  openView.value = false;
  reset();
}

getProvinceData();
getListData();
</script>
  